<template>
	<view class="drawer-box">
		<view
			:style="{width, height, left, right, top:_top, bottom, transition, 'padding-top':top}"
			class="drawer">
			<view class="con">
				<slot/>
			</view>
		</view>
		<view v-if="visible" class="mask" @click="hideHandler"></view>
	</view>
</template>

<script>
	export default{
		props:{
			'value':{type:Object},
			'top':{type:null}
		},
		data(){
			return{
				visible: this.value.show
			}
		},
		computed:{
			transition(){return this.value.direction?this.value.direction + ' 0.3s':''},
			width(){
				if(this.value.fullScreen || this.value.direction=='top' || this.value.direction=='bottom') return '100%'
				return (this.value.width || 250) + 'px'
			},
			height(){
				if(this.value.fullScreen || this.value.direction=='left' || this.value.direction=='right') return '100%'
				return (this.value.height || 400) + 'px'
			},
			left(){return this.stylePositonHandler('left', true)},
			right(){return this.stylePositonHandler('right', true)},
			_top(){return this.stylePositonHandler('top')},
			bottom(){return this.stylePositonHandler('bottom')}
		},
		watch:{
			'value.show'(v){
				setTimeout(()=>{
					this.visible = v
				}, 100)
			}
		},
		methods:{
			hideHandler(){
				let option = this.value
				option.show = false
				this.$emit('input', option)
			},
			stylePositonHandler(direction, isLeftOrRight=false){
				if((this.value.direction=='left'||this.value.direction=='right') && !isLeftOrRight){
					return 0
				}
				if((this.value.direction=='top'||this.value.direction=='bottom') && isLeftOrRight){
					return 0
				}
				const isShow = this.visible
				const isSameDirection = this.value.direction==direction
				const offset = isLeftOrRight ? '-'+this.width : '-'+this.height
				return isShow&&isSameDirection ? 0 : (isSameDirection ? offset : 'auto')
			}
		}
	}
</script>

<style lang="scss">
	.drawer{
		position: fixed;
		top: 0;
		z-index: 98;
		width: 500upx;
		height: 100%;
		background: #fff;
		box-sizing: border-box;
		.con{
			position: relative;
			height: 100%;
			overflow-y: auto;
		}
	}
	.drawer-box{
		position: relative;
		z-index: 98;
		.mask{
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background:rgba(0,0,0,0.1);
			z-index: 97;
		}
	}
</style>
